<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { getUserServiceUrl, sendServiceData } from '../../../../../common/service'
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
import { uploadUserAvatarApi } from '../../../../../common/service/api/userApi'

const emit = defineEmits(['update:modelValue', 'change', 'update:file'])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  file: {
    type: Object,
    default: function() {
      return null
    }
  }
})
const cropperRef = ref()
const state:any = reactive({
  isLoading: false,
  isPop: false,
  value: '',
  optImgUrl: '',
  editValue: '',
  previewData: {
    img: { },
    url: '',
    html: ''
  }
})

const showImg = computed(() => {
  return props.modelValue ? getUserServiceUrl(props.modelValue) : ''
})
const realTimeHandler = (val:any) => {
  Object.assign(state.previewData, val)
}

const controlOpt = (type:string, value:any = 1) => {
  if (type === 'left')cropperRef.value.rotateLeft()
  else if (type === 'right')cropperRef.value.rotateRight()
  else if (type === 'scale')cropperRef.value.changeScale(value)
}

const settingHandler = () => {
  const url = props.modelValue ? getUserServiceUrl(props.modelValue) : ''
  state.optImgUrl = url
  state.value = url
  state.isPop = true
}

const hiddenSetting = () => {
  state.isPop = false
}

/**
 * 本地文件
 * @param val
 */
const uploadFileHandler = (file:any) => {
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    state.optImgUrl = reader.result
  }
}

const submitSetting = () => {
  state.isLoading = true
  cropperRef.value.getCropBlob(async (data:any) => {
    console.log(data, '<=============getCropBlob==================================')
    state.isLoading = false
    const result = await sendServiceData(uploadUserAvatarApi, { file: data }, state)
    emit('update:modelValue', result.imgUrl)
    emit('change', result.imgUrl)
    hiddenSetting()
  })
}


</script>

<template>
  <div class="avatar-form-item">
    <div class="header-img">
      <el-tooltip content="点击修改头像" placement="top">
        <img :src="showImg"
             @click="settingHandler" />
      </el-tooltip>
    </div>
    <teleport to="body">
      <v-pop-win v-if="state.isPop"
                 title="设置头像"
                 width="800"
                 :loading="state.isLoading"
                 center
                 @submit="submitSetting"
                 @close="hiddenSetting">
        <div class="body-inner">
          <div class="set-inner">
            <div class="img-editor-box">
              <vue-cropper ref="cropperRef"
                           :img="state.optImgUrl"
                           info
                           auto-crop
                           :auto-crop-width="200"
                           :auto-crop-height="200"
                           info-true
                           output-type="png"
                           fixed-box
                           @real-time="realTimeHandler" />
            </div>

            <div class="img-editor-ctr">
              <el-upload :auto-upload="false"
                         :show-file-list="false"
                         accept=".jpg,.jpeg,.png"
                         :on-change="uploadFileHandler">
                <template #trigger>
                  <el-button>
                    选择文件
                  </el-button>
                </template>
              </el-upload>

              <v-icon title="放大"
                      icon="fangda"
                      class="icon-btn"
                      @click="controlOpt('scale',0.5)" />
              <v-icon title="缩小"
                      icon="suoxiao"
                      class="icon-btn"
                      @click="controlOpt('scale',-0.5)" />
              <v-icon title="左旋转"
                      icon="zuoxuanzhuan1"
                      class="icon-btn"
                      @click="controlOpt('left' )" />
              <v-icon title="右旋转"
                      icon="zuoxuanzhuan"
                      class="icon-btn"
                      @click="controlOpt('right' )" />
            </div>
          </div>

          <div class="preview-inner">
            <div class="show-preview preview-box">
              <div style="width: 200px; height: 200px">
                <img :src="state.previewData.url" :style="state.previewData.img" />
              </div>
            </div>
          </div>
        </div>
      </v-pop-win>
    </teleport>
  </div>
</template>

<style scoped lang="scss">

.avatar-form-item{
  @include hor-group(center);
  flex:none;
  width:100%;
  position:relative;

  .header-img{
    @include hor-group(center);
    flex:none;
    width:120px;
    height:120px;
    overflow: hidden;
    border-radius: 50%;
    border:1px solid var(--w-color-bor);
    box-sizing: border-box;
    cursor:pointer;
    img{
      width: 100%;
      height:100%;
    }
  }

  .header-btn{
    position:absolute;
    right:10px;
    top:0;
  }
}

.body-inner{
  @include hor-group() ;
  width:100%;
  height:420px;

  .set-inner{
    @include ver-group();
    flex:auto;
    width:100%;
    height:100%;

    .img-editor-box{
      @include hor-group(center);
      flex:auto;
      width:100%;
      height:100%;
    }
    .img-editor-ctr{
      @include hor-group(center);
      margin-top: 10px;
      width:100%;
      flex:none;
      .icon-btn {
        @include hor-group(center);
        flex: none;
        width: 32px;
        height: 32px;
        border: 1px solid var(--w-color-bor);
        border-radius: 3px;
        margin-left: 15px;
        box-sizing: border-box;
        cursor:pointer;

        &:hover {
          color: var(--w-icon-over);
          border: 1px solid var(--w-icon-over);;
        }
      }
    }

  }

  .preview-inner{
    @include hor-group(center) ;
    flex:auto;
    width:100%;
    height:100%;
    .preview-box{
      width:200px;
      height:200px;
      overflow: hidden;
      border-radius: 50%;
    }
  }


}

</style>
